import React, { Component } from 'react';
import '../style/index.less';
import { observable, useStrict, action } from 'mobx';
import { observer } from 'mobx-react';
import { BaseApp , Foot } from './BaseApp';
import Util from '../lib/commonJs';
import $ from "jquery";
// import mobileBgHead from "../image/mobile-bg-head.png";
import mobileBgHead from "../image/mobile-bg-head-2.png";
import mobileBgIcon from "../image/mobile-bg-icon.png";

@observer
class SearchCertMobile extends BaseApp {

    @observable searched = false;
    @observable Loading = false;
    @observable stu = {
        name:"",
	term:"",
	authenTime:"",
	hex:""
    };

    constructor(props){
	super(props);
	this._style = {
	    none:{
	        "display":"none"
	    },
	    show:{
		"display":"block"
	    }
	};

    }
    _doSearch = (event)=>{
        let _this = this;
	let txHex = $("#txId").val();
	let reHex = "";
        if(Util.isEmpty(txHex) || _this.Loading){
            return false;
	}else{
	    // reHex = txHex.replace(/\+/g,"2B%");
	    reHex = encodeURIComponent(txHex);
	    _this.Loading = true;
	    _this.AJAX({
		type:"get",
		url:`${_this.serverHost}/getCertInfo?hashData=${reHex}`,
	    }).then((data)=>{
		if(data.code === 200){
		    _this.searched = true;
		    _this.stu = {
			name:data.data.name,
			term:data.data.term,
			authenTime:data.data.authenTime,
			hex:txHex
		    };
		}else{
		    alert("证书查询失败")
		}
		_this.Loading = false;
	    },()=>{
		_this.Loading = false;
		alert("服务已关闭")
	    });
	}
    };
    _back = ()=>{
	this.searched = false;
    };
    _share = ()=>{
	$(".share-ctx").addClass("cos-show");
    };
    _downLoad = ()=>{
        window.open(`/certs/getCert?txHex=${encodeURIComponent(this.stu.hex)}`)
    };
    _closeShare = ()=>{
	$(".share-ctx").removeClass("cos-show");
    };
    componentDidMount(){
	let search = window.location.search;
	let mi = search.indexOf("=");
	let key = search.substr(0,mi);
	let value = search.substr(mi+1);

	if(key === "?fromQr" && !Util.isEmpty(value)){
	    $("#txId").val(value);
	    $(".search-btn")[0].click();
	}
    }
    render() {
        let shareUrl = encodeURIComponent(`http://cert.tj-fintech.com/certs/getCert?txHex=${this.stu.hex}`);
        let url = 'http://www.linkedin.com/shareArticle?mini=true&url='+shareUrl+'&title=区块链培训证书&source='+shareUrl;
	return (
	    <div className="app-search-box-mobile">
		<div className="bg-01">
		    <img src={mobileBgHead} />
		</div>
		<div className="bg-02" onClick={this._back}>
		    <img src={mobileBgIcon} />
		</div>
		<div className="search-block">
		    <div className="bg-triangle-box">
			<div className="tri-left" />
			<div className="tri-right" />
		    </div>
		    <div className="i-title">链谷人才信息查询</div>
		    <div className="i-box" style={this.searched?this._style.none:{}}>
			<input type="text" id="txId" placeholder={"标识码："}/>
		    </div>
		    <div className="i-box" style={(!this.searched)?this._style.none:{}}>
			<table className="cert-info-table">
			    <tbody>
			    <tr><td>姓名</td><td>{this.stu.name}</td></tr>
			    <tr><td>学历</td><td>本科/研究生</td></tr>
			    <tr><td>区块链培训</td><td>{this.stu.term}</td></tr>
			    <tr><td>毕业日期</td><td>{this.stu.authenTime}</td></tr>
			    <tr><td>标识码</td><td><div className="ellipsis" style={{maxWidth:"150px",float:"right"}}>{this.stu.hex}</div></td>
			    </tr>
			    {/*<tr><td>查询次数</td><td>7</td></tr>*/}
			    </tbody>
			</table>
		    </div>
		</div>
		<div className={`search-button-box ${this.Loading?' loading':''}`}>
		    <button className="search-btn theme-btn" onClick={this._doSearch} style={this.searched?this._style.none:{}}>
			<i className="fa fa-spinner search-button-loading" />
			<span className="search-button-text">查询学员信息</span>
		    </button>
		    <button className="share-btn theme-btn" style={!this.searched?this._style.none:{}} onClick={this._share}>
			分享
		    </button>
		    <button className="save-btn theme-btn" style={!this.searched?this._style.none:{}} onClick={this._downLoad}>
			证书下载
		    </button>
		    <div className="share-ctx">
			<a href={url} target="_blank">
			    <i className="fa fa-linkedin-square" style={{
				fontSize: "30px",
				position: "absolute",
				margin: "15px"
			    }}/>
			</a>
			<i className="fa fa-times" onClick={this._closeShare}/>
			{
			    Util.isEmpty(this.stu.hex)?"":<div className="qr-box"><img src={`/certs/getqr?hashData=${this.stu.hex}`} alt=""/></div>
			}
		    </div>
		</div>
	    </div>
	);
    }
}

class App extends BaseApp {
    constructor(props){
	super(props);
	if(Util.isMobile()){
	    /*$("body").on("touchmove",function(event){
		// event.preventDefault();
	    }, false)*/
	}
    }

    render() {
	return [
	    <div className={"app-body at-mobile"} key={this.GID()}>
		<SearchCertMobile />
	    </div>,
	    <Foot key={this.GID()} themeClass="at-mobile"/>
	];
    }
}
export default App;
